<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    div,
    span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
    }
    
    div.mini {
        width: 30px;
        height: 30px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
    }
    </style>
    <!--引入jquery的js库-->
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>

<body>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh" name="shanghai">上海</li>
        <li id="jl" name="jilin">吉林</li>
        <li id="my" name="mianyang">绵阳</li>
    </ul>
    <input type="button" id="b1" value="添加重庆li到 上海下" />
    <br/>
    <input type="button" id="b2" value="添加成都li到 北京前" />
    <br/>
    <input type="button" id="b3" onclick="test1()" value="添加重庆li到 上海下(使用dom的传统方法)" />
    <br/>
    <input type="button" id="b4" value="添加成都li到 北京和重庆之间" />
    <br/>
    <input type="button" id="b5" value="添加成都li到 吉林前面" />
    <br/>
</body>
<script language="JavaScript">
//*****添加重庆li到 上海下
	$("#b1").click(function(){
		//jquery方法，有两种方式
		//$myli = $("<li id='cq' name='chongqing'>重庆</li>");
		//先使用内如插入,下面这句话表示在city对象内部后面添加一个myli对象
		//方式1：一步到位
		//$("#city").append($myli);
		//==================================
		//方式二：逐步添加  这种方式更灵活、可以绑定事件
		$myli = $("<li></li>");//======>$myli=$("<li/>");
		$myli.text("重庆");//<li>重庆</>
		$myli.attr("id","cq");//===><li id='qc'>重庆</>
		$myli.attr("name","chongqing");
		//把$myli添加到上海后面
		//$("#city").append($myli);
		$myli.appendTo("#city");
	});

//***添加成都li到 北京前
	$("#b2").click(function(){
		//jquery方法
		$myli=$("<li id='cd' name='chengdu'>成都</li>");
		//$("#city").prepend($myli);
		$myli.prependTo("#city");
	});

//添加重庆li到 上海下(使用dom的传统方法)
	function test1(){
		var myli = document.createElement("li");
		myli.setAttribute("id","cq");
		myli.setAttribute("name","chongqing");
		myli.innerHTML = "重庆";
		document.getElementById("city").appendChild(myli);
	}
//添加成都li到 北京和重庆之间
	$("#b4").click(function(){
		//使用外部插入
		//$("#bj").after("<li id='cd' name='chengdu'>成都</li>");
		$("<li id='cd' name='chengdu'>成都</li>").insertAfter($("#bj"));
	});

//添加成都li到 吉林前面
	$("#b5").click(function(){
		//使用外部插入
		//$("#jl").before("<li id='cd' name='chengdu'>成都</li>");
		$("<li id='cd' name='chengdu'>成都</li>").insertBefore($("#jl"));
	});

</script>

</html>
